<template>
  <div id="info">
    <div id="first-line">
      <div><i class="iconfont icon-weibiaoti-1" style="color:#88A185;font-size:40px;"></i></div>

      <div>
        <p>
          <span><i class="iconfont icon-zuozhe2" style="color:#8091B0"></i>&nbsp;{{ article.author }}</span>
          <span><i class="iconfont icon-riqi" style="color:#8091B0"></i>&nbsp;{{article.created_date}}</span>
          <span><i class="iconfont icon-yuedu1" style="color:#8091B0"></i>&nbsp;{{article.read_num}}</span>
          <span><i class="iconfont icon-pinglun" style="color:#8091B0;"></i>&nbsp;{{ 3 }}</span>
        </p>

        <p style="line-height: 20px;">
          <i class="iconfont icon-biaoqian_top_right" style="color:#8091B0;"></i>&nbsp;分类专栏:&nbsp; {{article.tag}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleInfo",
  props: {article:Object}
}
</script>

<style scoped>
#first-line{
  width:100%;
  margin:16px auto;
  background-color: #D7DADB;
  padding:8px;
  border-radius: 6px;
}
#first-line > div{
  display: inline-block;
  line-height: 48px;
  vertical-align: top;
}
#first-line > div > p {
  color:#2C3E50;
  font-size:16px;
}
#first-line > div:last-child span{
  margin-right:26px;
}
</style>
